<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Title and Icon -->

        <title id="title">MiroTalk RTMP Streamer</title>
        <link id="icon" rel="shortcut icon" href="../images/logo.svg" />
        <link id="appleTouchIcon" rel="apple-touch-icon" href="../images/logo.svg" />

        <!-- Meta Information -->

        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta
            id="description"
            name="description"
            content="MiroTalk SFU powered by WebRTC and mediasoup, Real-time Simple Secure Fast video calls, messaging and screen sharing capabilities in the browser."
        />
        <meta
            id="keywords"
            name="keywords"
            content="webrtc, miro, mediasoup, mediasoup-client, self hosted, voip, sip, real-time communications, chat, messaging, meet, webrtc stun, webrtc turn, webrtc p2p, webrtc sfu, video meeting, video chat, video conference, multi video chat, multi video conference, peer to peer, p2p, sfu, rtc, alternative to, zoom, microsoft teams, google meet, jitsi, meeting"
        />

        <!-- https://ogp.me -->

        <meta id="ogType" property="og:type" content="app-webrtc" />
        <meta id="ogSiteName" property="og:site_name" content="MiroTalk SFU" />
        <meta id="ogTitle" property="og:title" content="Click the link to make a call." />
        <meta
            id="ogDescription"
            property="og:description"
            content="MiroTalk SFU calling provides real-time video calls, messaging and screen sharing."
        />
        <meta id="ogImage" property="og:image" content="https://sfu.mirotalk.com/images/mirotalksfu.png" />
        <meta id="ogUrl" property="og:url" content="https://sfu.mirotalk.com" />

        <!-- StyleSheet -->

        <link rel="stylesheet" href="../css/Root.css" />
        <link rel="stylesheet" href="../css/RtmpStreamer.css" />

        <!-- https://cdnjs.com/libraries/font-awesome -->

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

        <!-- Axios -->

        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

        <script defer src="https://cdn.jsdelivr.net/npm/xss/dist/xss.min.js"></script>

        <!-- JS scripts -->
        <script defer src="../js/Brand.js"></script>
        <script defer src="../js/RtmpStreamer.js"></script>
    </head>
    <body>
        <div id="popup" class="popup fadein hidden">
            <span id="popupMessage"></span>
            <button id="closePopup"><i class="fas fa-close"></i></button>
        </div>
        <div class="container fadein">
            <h1>MiroTalk RTMP Streamer</h1>
            <div class="input-group-inline">
                <input
                    id="apiSecret"
                    type="password"
                    value="mirotalkRtmpApiSecret"
                    placeholder="API Secret"
                    title="Enter the API secret here"
                />
            </div>
            <div class="input-group-inline">
                <input
                    id="rtmp"
                    type="text"
                    value=""
                    placeholder="rtmp://server:port/app/streamKey"
                    readonly
                    title="This is your RTMP live URL. It cannot be edited."
                />
                <button id="copy" title="Click to copy the RTMP URL"><i class="fas fa-paste"></i> Copy</button>
            </div>

            <video id="video" width="640" height="480"></video>

            <div class="button-group">
                <button id="startCamera" title="Click to start camera streaming">
                    <i class="fas fa-video"></i> Start Streaming
                </button>
                <button id="startScreen" title="Click to start screen streaming">
                    <i class="fas fa-desktop"></i> Start Streaming
                </button>
                <button id="stop" disabled title="Click to stop streaming">
                    <i class="fas fa-stop-circle"></i> Stop Streaming
                </button>
            </div>
        </div>
        <footer>
            <p>&copy; 2024 MiroTalk SFU, all rights reserved</p>
        </footer>
    </body>
</html>
